//  这个main.js是我们项目的js入口文件

// 将所有的导入都在这里导入 后面我们只需要导入main.js就行了

// 1.导入jquery 使用  import ** from 是ES6中导入模块方式的方法
// 这句表示 在node_modules中导入 jquery包 使用 $ 来接收
// 由于 ES6的代码台高级了，浏览器解析不了，所以在执行这一行的时候浏览器会报错
// 这里就要使用webpack进行处理 命令:
// js 一般要使用 $来接受
import $ from 'jquery'

// 使用import 导入样式表
import './css/index.css' //如何直接这样导入会报错
// 注意: webpack 默认只能打包处理 JS类型的文件，无法处理其他的非JS 类型的文件
// 如果要处理非JS类型的文件，需要安装第三方 loader 加载器：
//1.如果想要打包处理 css 文件 需要安装 npm i style-loader -D
// npm i css-loader -D  
//连着安装 npm i style-loader css-loader -D

// 注意:如果要通过路径的形式去引入 node_modules 中相关的文件，可以直接省略路径前面的
// node_modeles 这一层目录 直接写包的名字然后后面跟上具体的文件路径 不写这个目录默认去node_modeles这个目录下找
import 'bootstrap/dist/css/bootstrap.css'

import 'open-iconic/font/css/open-iconic-bootstrap.css'

$(function(){
    $('li:odd').css('backgroundColor','black');
    $('li:even').css('backgroundColor', function(){
        return '#'+'D97634';
    });
})


//使用 class关键字，是ES6中提供的新语法，是用来实现ES6中面向对象编程的方式
//和JAVA C# 实现面向对象的方式完全一样的 class是从后端语言中借鉴过来的 来实现面向对象
class Person{
    //使用 static 关键字可以定义静态属性
    //所谓的静态属性，就是可以直接通过类名 直接访问的属性
    //实例属性：只能通过实例来访问属性
    static info = {name :"leeue",age:21}
}
var p1  = new Person();

console.log(Person.info);

/*
在webpack中 默认只能处理一部分 ES6的新语法，一些更高级的ES6语法或者ES7的语法，
webpack是处理不了的这个时候就需要借助第三方的loader 来帮助webpack 处理这些高级的
语法。当第三方loader 把高级语法转为低级语法之后会把结果交给 webpack去打包到 bundle.js

通过: Balel 可以帮我我们将高级的语法转为低级的语法
在 webpack 中运行如下两套命令，安装两套包，去安装 Babel 相关的loader 功能
第一套包: npm i babel-core babel-loader babel-plugin-transform-runtime -D
第二套包: npm i babel-preset-env babel-preset-stage-0 -D
然后再 webpack的配置文件中 webpack.config.js中 在module 节点下的 rules 数组中
添加一个新的匹配规则 {test:'/\.js$/',use:'babel-loader',exclude:/node_modules}

注意: 在配置 babel 的loader 规则的时候必须把 node_modules 目录 通过 exclude选项进行排除掉.
原因: 1.如果不排除 node_modules 则 Balel 会把 node_modules 中所有第三方js文件
都打包编译，这样会非常消耗CPU，同时打包速度非常慢
2. 哪怕最终Babel 把所有的node_modules中的js 都转换完毕，但是项目也无法正常的运行
在项目根目录中，新建一个叫做 .babelrc 的Babel 配置文件,这个配置文件属于JSON格式，所以在写 .babelrc 写如下的配置
{
    "presets": ["env","stage-0"],  //预设 可以翻译成Babel语法  env
    "plugins":["transform-runtime"]  //上面安装了有个插件叫 babel-plugin-transform-runtime
}
*/

//以前js面向对象 函数首字母大写表示这个是一个对象

/* function Animal(name){
    this.name = name;
}
Animal.info = 123;

var a1 = new Animal("嘻嘻");

//这个是一个静态属性，可以使用类名直接去访问
console.log(Animal.info);

//这个是个实例属性
console.log(a1.name); */
